<template>
  <div :class="{
      'horizontal-bar-chart': true,
      'horizontal-bar-chart-dark': isDarkTheme,
      'horizontal-bar-chart-light': !isDarkTheme
    }" 
    id="horizontalBarChart">
  </div>
</template>

<script>
export default {
  props: {
    pageConfig: Object
  },
  
  computed: {
    isDarkTheme () {
      return true
    }
  },
  mounted() {
    this.initHorizontalBarChart();
  },
  methods: {
    addColor(data) {
      return data.map((item, index) => {
          let color1 = null;
          let color2 = null;
          if (index == 0) {
            color1 = "rgba(8, 248, 199, 1)";
            color2 = "rgba(8, 248, 199, 0.1)";
          } else {
            color1 = "rgba(173, 246, 255, 1)";
            color2 = "rgba(173, 246, 255, 0.1)";
          }
          return {
            value: item.value,
            itemStyle: {
                color: {
                  type: "linear",
                  x: 1,
                  y: 0,
                  x2: 0,
                  y2: 0,
                  colorStops: [
                      { offset: 0, color: color1}, // 0% 处的颜色 
                      { offset: 1, color: color2}, // 100% 处的颜色 
                  ],
                  global: false, // 缺省为 false
                },
            },
          };
      });
    },
    initHorizontalBarChart() {
      const horizontalBarChart = this.$echarts.init(document.getElementById('horizontalBarChart'));
      window.addEventListener('resize', () => {
        horizontalBarChart.resize();
      });

      const barData = [
        { value: 120, name: '履约计划' },
        { value: 180, name: '渠道' },
        { value: 140, name: '房屋' },
        { value: 200, name: '电费' },
        { value: 160, name: 'xxxxx' },
        { value: 190, name: 'xxxxx' },
        { value: 210, name: 'xxx' },
      ];
      const max = Math.max(...barData.map((item) => item.value));
      const barIcon = require('../bigScreen/css/barIcon-dark.png');
      const className = 'custom-tooltip-dark';

      const option = {
        title: {
          show: false,
          text: '水平柱状图示例'
        },
        tooltip: {
          trigger: 'axis',
          className: 'custom-tooltip',
          formatter: function (params) {

            let html = `
              <div class="${className}">
                <div class="title-box">
                  <div class="img-box"></div>
                  <span>${params[1].name}</span>
                </div>
                <div class="content-box">
                  <div class="left-box">
                    <div class="icon-box1"></div>
                    <span> ${params[1].seriesName + '  '} </span> 
                  </div>
                  <div><span class="orderNum"> ${params[1].value} </span><span class="unit">秒</span></div>
                </div>
            `;
            return html;
          },

        },
        grid: {
          left: '5%',
          right: '10%',
          top: '10%',
          bottom: '5%',
          containLabel: true
        },
        legend: {
          data: ['总体通过率']
        },
        xAxis: {
          type: 'value',
          // name: '秒',
          max,
          axisLine: {
            show: false,
          }, // x轴线不显示
          axisLabel: {
            show: false
          },
          itemStyle: {
            color: "#FFF",
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: 'dashed'
            }
          },
          axisLine: {
            show: false, // x轴线不显示
            lineStyle: {
              // type: 'dashed',
              color: "#999"
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: [
          // y轴坐标文字
          {
            type: 'category',
            inverse: true,
            axisLabel: {
              show: true,
              color: "#fff",
            },
            axisLine: {
              show: false, // y轴线不显示
            }, 
            axisTick: { 
              show: false, // 标签刻度不显示
            },
            splitLine: {
              show: false
            },
            data: barData.map((item) => item.name),
          },
          // 柱状图右边标识文字
          {
            type: 'category',
            inverse: true,
            axisTick: 'none',
            axisLine: 'none',
            show: true,
            axisLabel: {
              textStyle: {
                // color: '#fff',
                fontSize: 14,
              },
              formatter: function (value) {
                return  `{a|${value}} {b|秒}`
                // return value + "秒"
              },
              rich: {
                a: {
                  fontSize: 14,
                  color: "#fff",
                  backgroundColor: {
                    image: this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                      {offset: 0, color: 'red'}, // 红色起始颜色
                      {offset: 1, color: 'blue'} // 蓝色结束颜色
                    ])
                  },

                },
                b: {
                  fontSize: 14,
                  color: "#fff"
                }

              }
            },
            data: barData.map((item) => item.value),
          },
        ],
        series: [
          {
            type: "pictorialBar",
            data: barData.map((item) => item.value),
            symbol: "image://" + barIcon, // 柱状图截止图标
            // symbol: barIcon, // 柱状图截止图标
            barGap: "-100%",
            // symbolSize: [32, 38],
            symbolSize: [5, 14], // 柱状图截止图标大小 [宽, 长]
            symbolPosition: "end",
            symbolOffset: ["55%", "-2%"],
            z: 6,
            emphasis: {
              disabled: true,
            },
          },
          {
            name: '时长',
            type: "bar",
            barWidth: 8,
            z: 5,
			      showBackground: true,
            backgroundStyle: {
              color: 'rgba(194, 217, 222, 0.1)',
            },
            data: this.addColor(barData),
            emphasis: {
              disabled: true,
            },
          },
        ]

      }
      horizontalBarChart.setOption(option);
      horizontalBarChart.on('click', (params) => {
        console.log(params.name);
        this.$emit('handleOpenProcessing', params.name)
      })

    },
  }
  
}
</script>
<style lang="scss" scoped>
  .horizontal-bar-chart {
    height: 100%;
    width: 100%;
  }
  .horizontal-bar-chart-dark {
    ::v-deep .yAxis-container {
      .yAxis-text {
        font-size: 16px;
        font-family: "TCloudNumber";
        letter-spacing: 0.8px;
        background: linear-gradient(180deg, #FFF 51.85%, #53B5FD 83.33%);
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .yAxis-unit {
        font-size: 14px;

      }
    }
  }
::v-deep .custom-tooltip {
  // width: 200px;
  // height: 180px;
  padding: 0 !important;
  border: none !important;
  background-color: transparent !important;
  // background: url("../css/detailTooltipBg-dark.png") no-repeat;
  // background-size: 100% 100%;
  .custom-tooltip-dark {
    width: 200px;
    height: 80px;
    color: #fff;
    font-size: 16px;
    padding: 10px;
    border-radius: 5px;
    background: url("../bigScreen/css/tootipBG-dark.png") no-repeat;
    background-size: 100% 100%;

    .title-box {
      display: flex;
      align-items: center;
      .img-box {
        height: 30px;
        width: 40px;
        background: url("../bigScreen/css/title-dark.png") no-repeat;
        background-size: 100% 100%;
      }
    }
    .content-box {
      height: 30px;
      padding: 0 0 0 8px;
      display: flex;
      flex-direction: row;
      align-items: baseline;
      justify-content: space-between;
      
      .left-box {
        display: flex;
        align-items: center;
      }
      .icon-box1 {
        height: 15px;
        width: 15px;
        margin: 0 10px 0 0;
        background: url("../bigScreen/css/tooltipIcon-dark1.png") no-repeat;
        background-size: 100% 100%;
      }
    }
    .orderNum {
      font-family: "TCloudNumber";
      font-size: 20px;
      letter-spacing: 0.8px;
      background: linear-gradient(180deg, #FFF 51.85%, #53B5FD 83.33%);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  
    .unit {
      font-size: 14px;
    }
  }
}
  
</style>